<template>
  <div class="app-container">
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"

      >
      <div style="max-width:1000px;margin:auto;">
    <p class="shenqing">申请信息</p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td style="width: 200px;height: 34px;text-align: center;">申请单号</td>
        <td style="padding-left: 10px;"> {{form.oddNumbers}} </td>
        <td style="width: 200px;height: 34px;text-align: center;">申请人</td>
        <td style="padding-left: 10px;">{{form.userName}}</td>
      </tr>
      <tr>
        <td style="height: 34px;text-align: center;">设备编号</td>
        <td style="height: 34px;padding-left: 10px;">{{form.deviceCode}}</td>
        <td style="height: 34px;text-align: center;">设备名称</td>
        <td style="height: 34px;padding-left: 10px;">{{form.deviceName}}</td>
      </tr>
      <tr>
        <td style="height: 34px;text-align: center;">外委单位</td>
        <td style="height: 34px;padding-left: 10px">
          {{form.delegateUnit}}
        </td>
        <td style="height: 34px;text-align: center;">申请时间</td>
        <td style="height: 34px;padding-left: 10px">
          {{form.applyForTime}}
        </td>
      </tr>
      <tr>
        <td style="height: 34px;text-align: center;">预计金额</td>
        <td style="height: 34px;padding-left: 10px">
          {{form.estimatedAmount}}
        </td>
        <td style="height: 34px;text-align: center;">工期要求</td>
        <td style="padding-left: 10px">
          {{form.timeLimitForAProject}}
        </td>
      </tr>
      <tr>
        <td style="height: 34px;text-align: center;">外委理由</td>
        <td  colspan="3" style="padding-left: 10px">
          {{form.reason}}
        </td>
      </tr>
    </table>
    <p class="shenqing">验收信息</p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td style="width: 200px;height: 34px;text-align: center;">验收日期</td>
        <td style="padding-left: 10px;">{{form.acceptanceCheckTime}}</td>
        <td style="width: 200px;height: 34px;text-align: center;">总费用</td>
        <td style="padding-left: 10px;">{{form.totalCosts}}</td>
      </tr>
      <tr>
        <td style="height: 34px;text-align: center;">维修内容</td>
        <td  colspan="3" style="padding-left: 10px">
         {{form.maintenanceContent}}
        </td>
      </tr>
    </table>


    <el-row >
      <p class="shenqing">关联报修单</p>
      <el-table
        :data="form.dqmwoList"
        border
        stripe
        style="width: 1196px;margin-left: 15px">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="drfrOddNumber"
          label="维修单号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="报修人"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="故障类型">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="故障等级">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="报修时间">
        </el-table-column>
      </el-table>
      <div class="fujian">
        <div class="shenqing" style="display: inline-block">相关附件</div>
        <div class="unloadBox" style="width:1196px;margin-left: 15px;">
        <!-- <div class="img">
          <el-image :src="baseUrl()+item.accessoryUrl" :preview-src-list="[baseUrl()+item.accessoryUrl]"></el-image>
          <i class="el-icon-close" @click="imgDel(index,item.accessoryUrl)"></i>
        </div> -->
        <div class="file" v-for="(item,index) in form.dqmaList">
          <span class="index">{{index+1}}、</span>
          <span class="blue">{{item.accessoryName}}</span>
          <!-- <i class="blue el-icon-delete" @click="fileDownload(index,item.accessoryUrl)"></i> -->
        </div>
      </div>
      </div>
      <!-- <div class="fujian">
        <div class="shenqing" style="display: inline-block">验收相关附件</div>
        
      </div> -->
    </el-row>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
  import {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  import {repairDes} from '@/api/repair/index'


  export default {
    name: "Role",
    props:['pid'],
    data() {
      return {
        //申请信息
        applicationData:{
          bianhao:'',
        },
        //负责人数据
        tableDataFzr:[
          {name:'测试数据'}

        ],
        //巡检路线
        tableDataLx:[
          {name:'测试数据'}
        ],
        form:{},
        centerDialogVisible:true
      };
    },
    created() {
      if(this.pid){
        this.getData()
      }
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      getData(){
        repairDes(this.pid).then((res)=>{
          if(res.code==200){
            this.form=res.data
          }
        })
      },
      fileDownload(){

      }
    }
  };
</script>
<style lang="scss" scoped>
.dialog >>> .el-dialog__body{
    height: 85vh;
    overflow: scroll;
  }
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;
  }
  .tablestyle {
    width: 100%;
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .fujian {
    margin-top: 15px;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
  .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }

</style>
